.cherry-bubble {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;

  font-size: var(--font-size-sm);

  min-height: var(--bubble-btn-height);
  min-width: 50px;

  border: var(--border-width-1) solid var(--bubble-border);
  background-color: var(--bubble-bg);
  box-shadow: var(--bubble-shadow);
  border-radius: var(--bubble-radius);
  z-index: var(--bubble-z-index);
  padding: var(--spacing-xs);

  &.cherry-bubble--centered {
    left: 50%;
    transform: translateX(-50%);
  }

  // triangle（菱形箭头实现）
  // 不同于常见的边框三角的技巧，为了其应用边框颜色，采用了旋转菱形的方式实现
  .cherry-bubble-top,
  .cherry-bubble-bottom {
    position: absolute;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--bubble-bg);
    box-sizing: border-box;
    z-index: calc(var(--bubble-z-index) + 1);
    pointer-events: none;
  }

  .cherry-bubble-top {
    top: 0;
    transform: translateY(-50%) rotate(45deg);
    border-top: var(--border-width-1) solid var(--bubble-border);
    border-left: var(--border-width-1) solid var(--bubble-border);
    border-right: var(--border-width-1) solid transparent;
    border-bottom: var(--border-width-1) solid transparent;
  }

  .cherry-bubble-bottom {
    bottom: 0;
    transform: translateY(50%) rotate(45deg);
    border-bottom: var(--border-width-1) solid var(--bubble-border);
    border-right: var(--border-width-1) solid var(--bubble-border);
    border-top: var(--border-width-1) solid transparent;
    border-left: var(--border-width-1) solid transparent;
  }

  .cherry-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--bubble-btn-height);
    color: var(--toolbar-btn-color);
    background: var(--toolbar-btn-bg);
    padding: var(--bubble-padding);
    cursor: pointer;
    user-select: none;
    z-index: calc(var(--bubble-z-index) + 2);
    // --bubble-z-index 底部 bubble
    // --bubble-z-index + 1 .cherry-bubble-top 的指示器
    // --bubble-z-index + 2 .cherry-toolbar-button

    &:hover {
      border-color: var(--toolbar-border);
      background-color: var(--toolbar-btn-hover-bg);
      color: var(--toolbar-btn-hover-color);
    }

    &.cherry-toolbar-split {
      height: 65%;
      min-height: calc(0.65 * var(--bubble-btn-height));
    }
  }
}

.cherry-switch-paste {
  display: flex;
  align-items: center;
  justify-content: center;

  .cherry-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    color: var(--toolbar-btn-color);
    background: var(--toolbar-btn-bg);
    border-radius: var(--dropdown-radius);
    border: none;
    transition: background-color 0.2s;

    &:hover {
      background-color: var(--dropdown-item-hover-bg);
      color: var(--dropdown-item-hover-color);
    }

    &.active {
      background-color: var(--dropdown-item-active-bg);
      color: var(--dropdown-item-active-color);
    }
  }
}
